<template>
	<view>
		<view>
			<table-title content="白卡申请办理表详情"></table-title>
			<view class="record-id">单号：{{processNo}}</view>
			<view class="in-center">
				<small-title content="基本资料"></small-title>
				<view class="state-bar">
					<view class="state-msg">{{state}}</view>
				</view>
			</view>
			<view class="item-table">
				<view-item name="楼盘" :value="userMsg.userBuilding"></view-item>
				<view-item name="楼层" :value="userMsg.userFloor" :isLast="true"></view-item>
			</view>
			<small-title :isNeed="true" content="白卡说明(房源内各房间单独的门卡)"></small-title>
			<textarea class="textarea-style" maxlength="-1" :disabled="!(status === -1)" :value="cardContent" @input="inputDetial"></textarea>
			<view class="small-title">押金：{{spend}} 元</view>
			<view v-if="status===-1">
				<con-advance-pay-small-title content="支付方式"></con-advance-pay-small-title>
				<view style="display: flex;justify-content: center;">
					<radio-group class="payway-style" @change="changePayway">
						<label style="display: flex;">
							<radio :checked="payway[0]" :disabled="status!==-1" class="first-radio" color="#FF0000" value="alipay"></radio>
							<view class="payway-choice">
								<image src="../../../static/alipay-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">支付宝支付</view>
							</view>
						</label>
						<label style="display: flex;">
							<radio :checked="payway[1]" :disabled="status!==-1" class="second-radio" color="#FF0000" value="wechat"></radio>
							<view class="payway-choice">
								<image src="../../../static/wechat-logo.svg" class="payway-logo"></image>
								<view style="font-size: 30rpx;">微信支付</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
			<small-title content="处理进度"></small-title>
			<proccess-bar v-if="processFlag" :proccessList="proccessListDefult"></proccess-bar>
			<view v-if="status===4" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="giveBack">申请退还</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===6" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="confirmGiveBack">确认押金已退回</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===-1" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="onlinePay" >立即申请</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view v-if="status===3" class="mix-button">
				<view class="left-part">
					<button class="left-button" @click="confirmCard" >确认收到白卡</button>
				</view>
				<view class="right-part">
					<button class="right-button" @click="back">返回</button>
				</view>
			</view>
			<view style="height: 200rpx;"></view>
		</view>
	</view>
</template>		

<script>
	import {
		ONLINE_SERVER_ADDRESS_BASE,
		syncGetOrder,
		syncPriceInfo,
	} from "../../../util/network.js"
	import {
		processHistoryList
	} from "../../../util/common.js"
	export default{
		data() {
			return {
				processFlag:false,
				token:'',
				recordId: '待分配',                                                         //单号
				processNo:'待分配',
				state: '已受理',																	   //状态
				status: -1,
				userMsg:{'userName':'','userPhone':'','userCompany':'','userBuilding':'',
					'userFloor':'','userRoom':''},
				hours: 0,                                                                          //加时总时长
				spend:0,                                                                           //加时总费用
				whiteCard:[],
				payway: [true, false],                                                            //支付方式
				proccessList:[
					{'type':'firstCanvas','commentMsg':'发起申请','time':'2021-01-01 01:01:11'},
					{'type':'middleCanvas','commentMsg':'受理','time':'2020-02-02 02:02:22'},
					{'type':'lastCanvas','commentMsg':'办结','time':'2020-03-03 03:33:33'}
				],                                                                                 //处理进度
				proccessListDefult:[],                                                                    //加时单价，只在初次申请时通过查询对应区域价格获取值
				cardContent:"",
			}
		},
		methods: {
			inputDetial(e){
				this.cardContent = e.detail.value
			},
			/*
			功能：在线支付通用方法
			参数：无
			*/
		    onlinePay(){
				if(this.cardContent == ""){
					uni.showModal({
						content:'白卡说明不能为空',
						showCancel:false
					});
					return 0
				}
				if(!Number(this.spend) > 0){
					uni.showModal({
						content:'金额有误，请联系管家',
						showCancel:false
					});
					return 0
				}
		    	let orderInfo = "等后端接口"
				let orderNo = ""
		    	let paywaySingle = ''
				let _this = this
		    	if(this.payway[0]){
		    		paywaySingle = 'alipay'
		    	}else{
		    		paywaySingle = 'wxpay'
		    	}
				let whiteCardTemp = {"no":1,"name":"","num":1,"unit":"件"}
				whiteCardTemp.name = this.cardContent
				this.whiteCard.push(whiteCardTemp)
				let extraInfo = {
						deposit: this.spend,
						detail: JSON.stringify(this.whiteCard),
						commentMsg: '租户发起申请'                       //操作信息
					}
		    	uni.request({
		    		url:`${ONLINE_SERVER_ADDRESS_BASE}/pay/pay`,
		    		header: {
		    			'Authorization': this.token,
		    		},
		    		data: {
		    			orderName: "白卡办理",
		    			payPlatform: paywaySingle,                        //待写入工单内容
						orderType:5,
						extraInfo:JSON.stringify(extraInfo),
						amount: Number(this.spend),
						recordId:-1,
		    		},
		    		method:'POST',
		    		success: function (res) {
		    			console.log("提交成功",res.data);
		    			if(res.data.code == 200){
		    				if(paywaySingle == 'wxpay'){
		    					orderInfo = res.data.data.wxPayOrderInfo
								orderNo = res.data.data.orderNo
		    				}else{
		    					orderInfo = res.data.data.aliPayOrderInfo
								orderNo = res.data.data.orderNo
		    				}
		    				uni.requestPayment({  
		    					provider: paywaySingle,  
		    					orderInfo: orderInfo,  
		    					success: (e) => {  
		    						console.log(e);  
									uni.navigateBack()
									// _this.addOrder(orderNo)
		    					},  
		    					fail: (e) => {  
		    						console.log('支付失败',e) 
		    					}  
		    				});
		    			}
		    		}
		    	})
		    },

			
			/*
			功能：选择支付方式
			参数：无
			*/
			changePayway(e){
				console.log('-change事件:', e.detail.value)
				if(e.detail.value == "alipay"){
					this.payway=[true,false];
				}else{
					this.payway=[false,true];
				}
			},
			
			
			/*
			功能：工单详细页处理通用函数
			参数：
			option：操作类型（先定成 创建、写入、查询）
			*/
			addOrder(orderNo){
				console.log("[info]","工单已创建，工单号为：待分配")
				let whiteCardTemp = {"no":1,"name":"","num":1,"unit":"件"}
				whiteCardTemp.name = this.cardContent
				this.whiteCard.push(whiteCardTemp)
				console.log(this.spend)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/white-card/add`,
					header: {
						'Authorization': this.token,
					},
					data: {
						orderNo:orderNo,
						deposit: this.spend,
						detail: JSON.stringify(this.whiteCard),
						commentMsg: '租户发起申请'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						console.log("白卡申请add", res)
						if(res.data.code == 200){
							uni.navigateBack()
						}
					}
				})
			},
			confirmCard(){
				console.log("[info]","白卡确认：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/white-card/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: '租户确认收到白卡'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("白卡确认调用失败")
					}
				})
			},
			giveBack(){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '请确认是否申请退还该白卡？',
					success: function (R) {
						if (R.confirm) {
							console.log('用户点击确定');
							uni.request({
								url:`${ONLINE_SERVER_ADDRESS_BASE}/white-card/cancel/` + _this.recordId,
								header: {
									'Authorization': _this.token,
								},
								data: {
									commentMsg: '租户发起白卡退还申请'                       //操作信息
								},
								method:'POST',
								success: function (res) {
									if(res.data.code == 200){
										uni.navigateBack()
									}
								},
								fail: (res) => {
									console.log("白卡退还申请调用失败")
								}
							})
						} else if (R.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				console.log("[info]","白卡申请退还：" + this.recordId)
			},
			confirmGiveBack(){
				console.log("[info]","白卡确认押金退还：" + this.recordId)
				uni.request({
					url:`${ONLINE_SERVER_ADDRESS_BASE}/white-card/cancel/finish/` + this.recordId,
					header: {
						'Authorization': this.token,
					},
					data: {
						commentMsg: '租户确认已收到押金'                       //操作信息
					},
					method:'POST',
					success: function (res) {
						if(res.data.code == 200){
							uni.navigateBack()
						}
					},
					fail: (res) => {
						console.log("白卡退还确认调用失败")
					}
				})
			},
			getOrder(){
				let a = syncGetOrder("white-card/show/" + this.recordId)
				 a.then((res)=>{
					 console.log("异步",res)
					 if(res.data.code == 200){
						 this.status = parseInt(res.data.data.status)
						 switch(this.status) {
						      case 0:
						         this.state = "待指派工程"
						         break;
						      case 1:
						         this.state = "待工程制卡"
						         break;
						 	 case 2:
						         this.state = "待管家派送"
						 	    break;
						 	 case 3:
						         this.state = "待确认收卡"
						 	    break;
						 	 case 4:
						         this.state = "使用中"
						 	    break;
						      case 5:
						         this.state = "退卡办理中"
						         break;
						 	 case 6:
						 	    this.state = "待确认退款"
						 	    break;
						 	 case 7:
						 	    this.state = "白卡已退还"
						 	    break;
						      default:
						 	    this.status = -1
						        this.state = "待申请"
						 } 
						 this.spend = res.data.data.deposit
						 this.cardContent = JSON.parse(res.data.data.detail)[0].name
						 this.processNo = res.data.data.processNo
						 this.proccessListDefult = processHistoryList(res.data.data.processDetail)
						 this.processFlag = true
					}
				})
			},
			back(){
				uni.navigateBack()
			}
		},
		onLoad(option) {
			//传入单号
			let userInfo = uni.getStorageSync('userinfo')
			if(userInfo != null){
				this.userMsg.userBuilding = userInfo.title
				this.userMsg.userFloor = userInfo.floor
				this.recordId = option.id
				this.state = option.state
				this.token = uni.getStorageSync('token')
			}else{
				uni.navigateTo('../../login/login')
			}
		},
		mounted() {
			//如果是新建表单则不查询
			let buildId = uni.getStorageSync('userinfo').buildId
			// let price = syncPriceInfo(1,1,buildId) //查询单价 白卡类，楼盘类 所属楼盘
			let price = syncPriceInfo(1,1,buildId) //查询单价 白卡类，地域类
			price.then((res) => {
				try{
					this.spend = res.data.data[0].price
				}catch(e){
					this.spend = 0
				}
				if(this.spend == 0){
					let priceNew = syncPriceInfo(1,0) //查询单价 白卡类，地域类
					priceNew.then((res) => {
						this.spend = res.data.data[0].price
					})
				}
			})
			if(this.state != '待申请'){
				this.getOrder()
			}
		}
	}
</script>

<style>
	page{
		background-color: #F1F1F1
	}
	.record-id{
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 260rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 50rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
		height: 50rpx;
	}
	.state-msg{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.item-table{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.mix-button{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.left-part{
		float: right;
	}
	.right-part{
		float: left;
	}
	.left-button{
		background-color: #FF0000;
		border-radius: 50rpx 0 0 50rpx;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.right-button{
		background-color: #0000FF;
		border-radius: 0 50rpx 50rpx 0;
		color: #FFFFFF;
		width: 300rpx;
		font-size: 30rpx;
	}
	.in-center{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.add-button {
		border-width: 0px;
		align-items: center;
		justify-content: center;
		margin: 30rpx 0 40rpx 250rpx;
		height: 50rpx;
		width: 250rpx;
		display: flex;
		color: #22B242;
	}
	.payway-style {
		display: flex;
		flex-direction: column;
		width: 665rpx;
		margin-left: 18rpx;
	}
	.first-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-bottom: none;
		border-right: none;
	}
	.second-radio {
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		padding-left: 25rpx;
		border: solid 0rpx #C8C7CC;
		border-right: none;
		width: 50rpx;
	}
	.payway-choice {
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		border: solid 0rpx #C8C7CC;
		width: 600rpx;
		border-left: none;
	}
	.payway-logo {
		width: 50rpx;
		height: 50rpx;
		margin: 0 25rpx 0 25rpx;
	}
	.textarea-style{
		display: flex;
		justify-content: center;
		width: 650rpx;
		height: 200rpx;
		margin-left: 50rpx;
		background-color: #FFFFFF;
		border: solid 1rpx #C0C0C0;
	}
	.small-title{
		margin: 20rpx 0 20rpx 50rpx;
	}
</style>
